/**
 * 图表设计器
 *
 * create by 姚巨磊  2017年3月14日15:20:30
 *
 * 左侧为表格项，显示概要信息
 * 右侧为设计区域，用于拖拽放布局。
 *
 *
 */
define(["require", "jquery", 'public/app', 'jquery.gridster', "chartLoader"], function (require, $, app, Gridster) {

    function designer($container) {
        this._$container = $container;
        this._initLayout();
        this._init();
    }

    designer.prototype = {
        _initLayout: function () {
            $('#muuri_designer_layout').layout();
        },
        /**
         * 初始化url地址
         * @private
         */
        _initUrlPath: function () {
            this.urlPaths = {
                graphsData: app.urlBuild("/dirms/dev/graphs/all"),
                saveGraph: app.urlBuild("/dirms/dev/graphs/save"),
                saveChart: app.urlBuild("/dirms/dev/chart/save")

            };
        },

        /**
         * 初始化类
         * @private
         */
        _init: function () {
            this._initUrlPath();
            this._initComponents();
        },

        /**
         * 初始化控件
         * @param readyData
         * @private
         */
        _initComponents: function () {
            this._initDatagrid();
            this._initCommboBox();
            this._initDialog();
            this._initEventBinding();
            this._initGridster();
        },

        /**
         * 初始化所有下拉框
         *
         * @private
         */
        _initCommboBox: function () {
            var self = this;
            /**
             * 从chartLoader中获取加载器列表
             */
            var loaderList = $(this).chartLoader("getLoaderList");
            //图形类型
            this._$container.find("#chartType").combobox({
                valueField: 'id',
                textField: 'value',
                data: loaderList,
                onSelect: function (row) {
                    /**
                     * 切换图形类型的时候，从chartLoader中获取对应图形的配置项，加载到属性表格中
                     */
                    self._loadChartOption(row["id"]);
                }
            });
            //是否刷新
            this._$container.find("#refFlag").combobox({
                valueField: 'id',
                textField: 'value',
                data: [{id: '1', value: '是'}, {id: '0', value: '否'}]
            });
            //刷新间隔
            this._$container.find("#refMs").combobox({
                valueField: 'id',
                textField: 'value',
                data: [{id: '500', value: '0.5秒'}, {id: '1000', value: '1秒'}, {id: '5000', value: '5秒'}, {
                    id: '10000',
                    value: '10秒'
                }, {id: '30000', value: '30秒'}]
            });

        },
        /**
         * 加载图形配置信息
         *
         * @param loaderName
         * @private
         */
        _loadChartOption: function (loaderName, option) {
            if (!option) {
                option = $(this).chartLoader("getLoaderOption", loaderName);
            }
            $("#designer_chartser_datagrid").datagrid("loadData", option);
        },
        /**
         * 初始化画布
         *
         * @param initData
         * @private
         */
        _initGridster: function (initData) {
            //初始化Gridster对象
            var self = this;
            var winWidth = $('#muuri_designer_layout').width();
            var setWidth = Math.floor((winWidth - 50) / 4);
            var gridster = $("#gridster_desiger ul").gridster({    //通过jquery选择DOM实现gridster
                widget_base_dimensions: [setWidth, 217],    //模块的宽高 [宽,高]
                widget_margins: [5, 5],    //模块的间距 [上下,左右]
                min_cols: 4,
                //设置resize句柄
                resize: {
                    enabled: 'true',//允许放缩
                    handle: '.resize',//html标签的css类名，按住此标签可以对网格进行放缩
                    axes: ['x', 'y', 'both']
                },
                //设置serialize()方法的返回值
                serialize_params: function ($w, wgd) {//$w为要输出位置的网格对象（li），wgd为该网格对象的坐标对象，包括col，row，size                                                     //_x,size_y四个成员
                    return {
                        col: wgd.col,
                        row: wgd.row,
                        size_x: wgd.size_x,
                        size_y: wgd.size_y,
                        form: $w.data("form")//存储的表单信息
                    }
                }
            }).data('gridster');
            this.gridster = gridster;
            //关闭widget
            //注意：一定要用on(event,selector,function)方法，该方法使用委托机制
            $('ul').on("click", ".gs-close", function () {
                var $li = $(this).parents("li");
                $li.chartLoader('clearTimer',$li);//清除定时器
                gridster.remove_widget($li, null, null);//移除节点
            });
            $('.gridster').on('click', '.gs-edit', function () {
                self._editChart($(this).parents("li"));
            });

            $('.gridster').on('click', '.gs-refresh', function () {
                var $li = $(this).parents("li");
                self._loadChart($li, $li.data("form"));
            });

        },

        /**
         * 加载画布数据
         *
         * @param initData
         * @private
         */
        _loadGridster: function (initData) {
            var self = this;
            $("#gridster_desiger").chartLoader('clearAllTimer');//清除定时器
            this.gridster.remove_all_widgets(null);
            if (initData) {
                //注意：Gridster首字母必须大写；先按row排序，row相同的再按列排序，按排序后的顺序插入data可以保证位置不会偏移
                var data = Gridster.sort_by_row_and_col_asc(initData);
                for (var i = 0; i < data.length; i++) {
                    var wrapper = $('<li></li>');

                    wrapper.append('<a href="javascript:;" class="gs-edit" style="display: inline;"><i class="fa fa-pencil"></i></a>'
                    + '<a href="javascript:;" class="gs-close" style="display: inline;"><i class="fa fa-times"></i></a>'
                    + '<a href="javascript:;" class="gs-refresh"><i class="fa fa-refresh"></i></a>'
                    + '<div style="text-align: center;height: 98%;width: 100%">'
                    + '<div id="content" style="height: 100%;width: 100%"></div></div>');
                    this.gridster.add_widget(wrapper, data[i].size_x, data[i].size_y, data[i].col, data[i].row);
                    //加载表单信息
                    self._loadChart(wrapper, data[i]["form"]);
                }
            }
        },

        /**
         * 渲染容器里面的图形
         *
         * @param $el
         * @param form
         * @private
         */
        _loadChart: function ($el, form) {
            $el.data("form", form);
            //渲染图表
            $el.find("#content").chartLoader(form);
        },

        /**
         * 在画布上添加一个图形容器
         *
         * @param form
         * @param $li
         * @private
         */
        _addWidget: function (form, $li) {
            //添加节点
            if (!$li) {
                var $li = $('<li></li>');
                $li.append(''
                + '<a href="javascript:;" class="gs-edit" style="display: inline;"><i class="fa fa-pencil"></i></a>'
                + '<a href="javascript:;" class="gs-close" style="display: inline;"><i class="fa fa-times"></i></a>'
                + '<a href="javascript:;" class="gs-refresh"><i class="fa fa-refresh"></i></a>'
                + '<div style="text-align: center;height: 98%;width: 100%">'
                + '<div id="content" style="height: 100%;width: 100%"></div></div>');
                this.gridster.add_widget($li, 1, 1);
            }
            this._loadChart($li, form)
        },

        /**
         * 编辑图形
         *
         * @param $li
         * @private
         */
        _editChart: function ($li) {
            var form = $li.data("form");
            //加载表单信息
            $("#designer_chart_form").form("load", form).data("$li", $li);
            //加载属性表格数据
            this._loadChartOption("", form["rowdata"]);
            //打开对话框
            $("#designer_chartDialog").dialog("open");
        },

        /**
         * 添加图形
         *
         * @private
         */
        _addChart: function () {
            //加载表单信息
            $("#designer_chart_form").form("clear").data("$li", null);
            //清空属性表格数据
            $("#designer_chartser_datagrid").datagrid("loadData", []);
            //打开对话框
            $("#designer_chartDialog").dialog("open");
        },

        /**
         * 初始化所有表格信息
         * @private
         */
        _initDatagrid: function () {
            var self = this;
            /**
             * 图形集-主表格
             */
            self._$container.find("#muuri_designer_datagrid").datagrid({
                rownumbers: true,
                pagination: true,
                singleSelect: true,
                url: this.urlPaths.graphsData,
                method: 'get',
                width: 'auto',
                height: '100%',
                //对应model层字段
                columns: [[
                    {field: 'id', title: "", width: 100, hidden: true},
                    {field: 'grsNo', title: '图形集编号', width: '10%'},
                    {field: 'grsName', title: '图形集名称', width: '30%'},
                    {field: 'grsType', title: '图形集类型', width: '10%'},
                    //{field: 'tmpFlag', title: '是否模板', width: 100},
                    {field: 'remark', title: '备注', width: '48%'}
                ]],
                toolbar: this._$container.find("#muuri_designer_tb")
            });


            /**
             * 图形系列信息
             */
            self._$container.find("#designer_chartser_datagrid").datagrid({
                width: 'auto',
                height: '100%',
                data: [],
                showGroup: false,
                scrollbarSize: 0,
                singleSelect: true,
                columns: [[
                    {
                        field: 'name', title: '数据项', width: '50%', formatter: function (value, row, index) {
                        if (row['showName']) {
                            return (row['showName']);
                        } else {
                            return value;
                        }
                    }
                    },
                    {field: 'value', title: '数据值', width: '45%', editor: "dataSource"}

                ]],
                onClickRow: function (rowIndex, rowData) {
                    var rows = $('#designer_chartser_datagrid').datagrid('getRows');
                    for (var i = 0; i < rows.length; i++) {
                        $('#designer_chartser_datagrid').datagrid('endEdit', i);
                    }
                    var editor = $('#designer_chartser_datagrid').datagrid('beginEdit', rowIndex);
                    editor.focus();
                }
            });
        }
        ,
        /**
         * 初始化所有对话框
         *
         * @private
         */
        _initDialog: function () {
            var self = this;
            //添加图形集对话框
            self._$container.find("#designer_graphDialog").dialog({
                title: '添加图形集',
                closed: true,
                width: '100%',
                height: '100%',
                onClose: function () {
                    $("#gridster_desiger").chartLoader('clearAllTimer');//清除定时器
                    self.gridster.remove_all_widgets(null);//关闭之后清除
                },
                buttons: [
                    {
                        text: '提交', id: 'saveGraph', iconCls: 'icon-ok', handler: function () {
                        //表单信息
                        var formData = $("#designer_graph_form").serializeJson();
                        //布局信息
                        var s = JSON.stringify(self.gridster.serialize());
                        formData["widgetData"] = s;
                        if (formData["id"] == "")formData["id"] = null;
                        $.ajax({
                            url: self.urlPaths.saveGraph,
                            type: "POST",
                            cache: false,
                            contentType: "application/json",
                            dataType: "json",
                            data: JSON.stringify(formData),
                            success: function () {
                                $("#muuri_designer_datagrid").datagrid('reload', {
                                    url: self.urlPaths.graphsData
                                });
                                $("#designer_graphDialog").dialog('close');
                                $.messager.alert('提示：', '添加成功');
                            }
                        });
                    }
                    },
                    {
                        text: '取消', iconCls: 'icon-cancel', handler: function () {
                        $('#designer_graphDialog').dialog('close');
                    }
                    }
                ]
            });
            //添加图对话框
            self._$container.find("#designer_chartDialog").dialog({
                title: '添加图',
                closed: true,
                width: '980px',
                height: '550px',
                buttons: [
                    {
                        text: '确定', id: 'saveGraph', iconCls: 'icon-ok', handler: function () {
                        //基础信息
                        var formData = $("#designer_chart_form").serializeJson();
                        //配置项信息
                        var rows = $('#designer_chartser_datagrid').datagrid('getRows');
                        for (var i = 0; i < rows.length; i++) {
                            $('#designer_chartser_datagrid').datagrid('endEdit', i);
                        }
                        var rowdata = $("#designer_chartser_datagrid").datagrid("getData");
                        var option = {};
                        $.grep(rowdata.rows, function (n, i) {
                            option[n["name"]] = n["value"];
                        });
                        formData.option = option;
                        formData.rowdata = rowdata;
                        //添加
                        self._addWidget(formData, $("#designer_chart_form").data("$li"));
                        $('#designer_chartDialog').dialog('close');
                    }
                    },
                    //{
                    //    text: '数据源管理', iconCls: 'icon-large-shapes', handler: function () {
                    //    $(this).chartLoader("loadDailog", {
                    //        jsp: "/pages/app/graph/dataSource.jsp",
                    //        js: "app/graph/dataSource",
                    //        text: "数据源管理",
                    //        h: "400",
                    //        w: "800",
                    //        onSure: function () {
                    //            var row = $("#graph_dsChooser_item_datagrid").datagrid("getSelections");
                    //            var dsId = "";
                    //            var result = "";
                    //            var key = "";
                    //            //多选数组
                    //            if (row.length) {
                    //                dsId = row[0]["dsId"];
                    //                var itemarray = [];
                    //                $.grep(row, function (item, i) {
                    //                    itemarray.push(item["key"]);
                    //                });
                    //                key = itemarray.join(",");
                    //            } else {
                    //                dsId = row["dsId"];
                    //                key = row["key"]
                    //            }
                    //
                    //            var result = dsId + "_" + key;
                    //            input.searchbox("setValue", result);
                    //        },
                    //        callback: function () {
                    //        },
                    //        param: {}
                    //    });
                    //}
                    //},
                    {
                        text: '取消', iconCls: 'icon-cancel', handler: function () {
                        $('#designer_chartDialog').dialog('close');
                    }
                    }
                ]
            });
        }

        ,
        /**
         * 事件绑定
         * @private
         */
        _initEventBinding: function () {
            //【todo 在此编写绑定事件的方法。如按钮需要绑定的click事件。建议按如下格式绑定，并将this作为参数传入】
            this._$container.find('#muuri_designer_add').on('click', {self: this}, this._actions.addClick);
            this._$container.find('#muuri_designer_edit').on('click', {self: this}, this._actions.editClick);
            this._$container.find('#muuri_designer_remove').on('click', {self: this}, this._actions.removeClick);
            this._$container.find('#muuri_designer_queryBtn').on('click', {self: this}, this._actions.queryClick);
            $('#designer_chart_add').on('click', {self: this}, this._actions.addChartClick);
            $('#designer_chart_refresh').on('click', {self: this}, this._actions.reloadChartClick);

        }
        ,

        /**
         * 按钮事件
         */
        _actions: {
            /**
             * 点击主界面添加按钮
             * 弹出图形集添加界面
             *
             * @param evt
             */
            addClick: function (evt) {
                $('#designer_graph_form').form('clear');
                evt.data.self._loadGridster(null);
                $("#designer_graphDialog").dialog("open");
            }
            ,
            /**
             * 选中主界面表格一条图形集数据
             * 点击编辑按钮，弹出图形集编辑界面
             *
             * @param evt
             */
            editClick: function (evt) {
                var row = $('#muuri_designer_datagrid').datagrid('getSelected');
                if (row != null) {
                    evt.data.self._loadGridster(eval('' + row["widgetData"] + ''));
                    $('#designer_graph_form').form('load', row);
                    $("#designer_graphDialog").dialog("open");
                }
                else {
                    $.messager.alert('提示：', '请选择要编辑的图形集。');
                }
            }
            ,
            /**
             * 删除图形集记录
             */
            removeClick: function () {
                var row = $('#muuri_designer_datagrid').datagrid('getSelected');
                if (row != null) {
                    $.messager.confirm('确认', '确定要移除该图形集及其下属所有信息吗?', function (r) {
                        if (r) {
                            $.ajax({
                                type: 'delete',
                                url: app.urlBuild("/dirms/dev/graphs/" + row.id),
                                success: function () {
                                    $('#muuri_designer_datagrid').datagrid('reload', {url: app.urlBuild("/dirms/dev/graphs/all")});
                                    $('#designer_graph_form').form('clear');
                                }
                            });
                        }
                    });
                }
                else {
                    $.messager.alert('提示：', '请选择要删除的图形集。');
                }
            }
            ,
            /**
             * 查询图形集数据
             *
             * @param evt
             */
            queryClick: function (evt) {
                $('#muuri_designer_datagrid').datagrid('reload', {url: app.urlBuild("/dirms/dev/graphs/all")});
            },
            /**
             * 添加一个图形
             * @param evt
             */
            addChartClick: function (evt) {
                evt.data.self._addChart();
            },
            /**
             * 重置画布图形
             * @param evt
             */
            reloadChartClick: function (evt) {
                var row = $('#muuri_designer_datagrid').datagrid('getSelected');
                if (row != null) {
                    evt.data.self._loadGridster(eval('' + row["widgetData"] + ''));
                } else {
                    $("#gridster_desiger").chartLoader('clearAllTimer');//清除定时器
                    evt.data.self.gridster.remove_all_widgets(null);
                }
            }
        }

    };

    return designer;
})
;